<template>
	<!-- 导航栏自定义（在对应的页面设置效果）-->
	<!-- 中间内容 -->
	<index v-if="tabbarIndex == 0" @eidttab="eidttab"></index>
	<preferred v-if="tabbarIndex == 1"></preferred>
	<photograph v-if="tabbarIndex == 2"></photograph>
	<video-tabbar v-if="tabbarIndex == 3"></video-tabbar>
	<my v-if="tabbarIndex == 4"></my>
	<!-- 底部导航栏 -->
	<tn-tabbar v-model="currentTabbar" fixed active-color="#4B8FCD">
		<tn-tabbar-item v-for="(item, index) in tabbarData" :key="index" :icon="item.icon"
			:active-icon="item.activeIcon" :text="item.name" :bulge="index === 2"
			:icon-size="index === 2 ? '90rpx': '40rpx'"
			@click="switchTabbar(index)" />
	</tn-tabbar>
</template>

<script setup>
	import {
		onMounted,
		ref
	} from 'vue'
	import index from './components/index/index.vue'
	import preferred from './components/preferred/preferred.vue'
	import photograph from './components/photograph/photograph.vue'
	import videoTabbar from './components/video/video.vue'
	import my from './components/my/my.vue'
	let props = defineProps({
		tabbarType: {
			type: String,
			required: true
		}
	})
	const currentTabbar = ref(0)
	const tabbarIndex = ref(0)

	// 导航栏数据
	const tabbarData = [{
			name: '首页',
			icon: '/static/tabbar/index-not-selected.png',
			activeIcon: '/static/tabbar/index-selected.png',
		},
		{
			name: '优选',
			icon: '/static/tabbar/preferred-not-select.png',
			activeIcon: '/static/tabbar/preferred-select.png',
		},
		{
			name: 'AI发型',
			icon: '/static/tabbar/middle-not-selected.png',
			activeIcon: '/static/tabbar/middle-selected.png',
		},
		{
			name: '视频',
			icon: '/static/tabbar/video-not-select.png',
			activeIcon: '/static/tabbar/video-select.png',
		},
		{
			name: '我的',
			icon: '/static/tabbar/my-not-selected.png',
			activeIcon: '/static/tabbar/my-selected.png',
		}
	]
	//首页传值
	const eidttab = (e) => {
		tabbarIndex.value = e
		currentTabbar.value = e
	}
	// 切换tabbar
	const switchTabbar = (index) => {
		tabbarIndex.value = index
	}
	// onMounted(() => {
	// 	console.log('props.tabbarType', props.tabbarType);
	// 	tabbarIndex.value = props.tabbarType
	// })
</script>

<style lang="scss" scoped>
  uni-image > img{
    
  }
</style>